'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navigation() {
  const pathname = usePathname();
  
  const isActive = (path: string) => {
    return pathname === path;
  };
  
  return (
    <nav className="main-nav">
      <Link href="/" className={`nav-link ${isActive('/') ? 'active' : ''}`}>
        首页
      </Link>
      <Link href="/text-binding" className={`nav-link ${isActive('/text-binding') ? 'active' : ''}`}>
        文本绑定
      </Link>
      <Link href="/counter" className={`nav-link ${isActive('/counter') ? 'active' : ''}`}>
        计数器
      </Link>
      <Link href="/list" className={`nav-link ${isActive('/list') ? 'active' : ''}`}>
        列表绑定
      </Link>
    </nav>
  );
}